<template>
    <el-tabs :model-value="activeName" closable type="card" @tab-remove="handleClose">
        <el-tab-pane :key="item.id" :label="item.label" :name="item.name" v-for="(item,index) in data.tabList">
            <!-- 固定高度使三个选项卡高度一致 -->
            <el-scrollbar height="calc(100vh - 60px)">
                <component :is="item.route" v-model="item.id" />
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
    import type { TabsPaneContext } from 'element-plus';
    import score_analyseVue from './content/score_analyse.vue';
    import score_manageVue from './content/score_manage.vue';
    import class_manageVue from './content/class_manage.vue';
    import { getCurrentInstance, ref, reactive } from 'vue';
    import exam_manageVue from './content/exam_manage.vue';
    const cxt = getCurrentInstance() //相当于Vue2中的this
    const bus = cxt.appContext.config.globalProperties.$bus;

    const data = reactive({
        tabList: [
            // {
            //     id: 4000,
            //     label: '考试管理',
            //     name: '4000',
            //     route: exam_manageVue
            // },
            {
                id: 1000,
                label: '成绩分析',
                name: '1000',
                route: score_analyseVue
            }
        ]
    });
    let activeName = ref(data.tabList[0].name);

    const handleClose = (name : String) => {
        console.log('close', name)
        // for(let i = 0 ; i < tabList.length;i++){
        //     if(tabList[i].name == Number(name)){
        //         tabList.de
        //     }
        data.tabList = data.tabList.filter((tab) => { return String(tab.name) != name })
        // console.log(data.tabList);
    }

    // 事件监听
    bus.on('select-menu', (menu) => {
        for (let i = 0; i < data.tabList.length; i++) {
            if (data.tabList[i].id == menu.id) {
                activeName.value = data.tabList[i].name;
                // console.log(activeName.value, data.tabList[i])
                return;
            }
        }
        // console.log(data.tabList)
        data.tabList.push({
            id: menu.id,
            label: menu.name,
            name: String(menu.id),
            route: menu.route
        });

        activeName.value = data.tabList[data.tabList.length - 1].name;
        // console.log(activeName.value, menu)
    });
</script>

<style></style>